<template>
  <div v-if="!btnHide" style="display: inline-flex;margin: 0 !important;">
    <slot name="before" />
    <el-button v-if="cancelShow" @click="cancel">{{ $t(cancelBtnName) }}</el-button>
    <slot name="middle" />
    <cache-btn v-if="saveShow" :is-disable="isDisable" :btn-has-permi="btnHasPermi" :cache-key="cacheKey" :bus-data="busData" @cacheData="cacheData" />
    <el-button v-if="saveShow" v-hasPermi="btnHasPermi" :disabled="isDisable" :type="btnType" @click="submitForm">{{ $t(saveBtnName) }}</el-button>
    <slot name="after" />
  </div>
</template>

<script>
    import cacheBtn from '@/components/Act/FormBtn/cacheBtn.vue'
    export default {
      name: 'SaveBtn',
      components: {
        cacheBtn
      },
      props: {
        // 是否强制隐藏操作按钮
        btnHide: {
          type: Boolean,
          required: false
        },
        busData: {
          type: Object,
          default: () => {}
        },
        // 权限标签
        hasPermi: {
          type: String,
          default: undefined
        },
        // 是否显示取消按钮
        cancelShow: {
          type: Boolean,
          default: true
        },
        // 是否显示保存按钮
        saveShow: {
          type: Boolean,
          default: true
        },
        handleFun: {
          type: String,
          default: () => 'submitForm',
          desc: '点击保存时调用的函数名称'
        },
        function: {
          type: Function,
          default: undefined,
          desc: '保存函数'
        },
        cancelFunc: {
          type: Function,
          default: undefined,
          desc: '取消函数'
        },
        saveBtnName: {
          type: String,
          default: () => '保存'
        },
        cancelBtnName: {
          type: String,
          default: () => '取消'
        },
        disabled: {
          type: Boolean,
          default: false
        },
        cacheKey: {
          type: String,
          default: ''
        },
        btnType: {
          type: String,
          default: 'primary'
        }
      },
      data() {
          return {
            // 权限标签数组
            btnHasPermi: this.hasPermi ? [this.hasPermi + ':edit'] : [],
            // 是否禁用保存按钮 防止重复提交
            isDisable: false
          }
      },
      watch: {
        disabled: {
          handler(value) {
            this.isDisable = value
            this.$forceUpdate()
          },
          deep: true,
          immediate: true
        },
        hasPermi: {
          handler(value) {
            this.btnHasPermi = value ? [value + ':edit'] : []
          }
        }
      },
      methods: {
        // 调用源页面的保存方法
        submitForm: function() {
          this.isDisable = true
          setTimeout(() => {
            this.isDisable = false // 点击一次时隔一秒后才能再次点击
          }, 1000)
          if (this.function) {
            this.function()
          } else {
            this.$parent[this.handleFun]()
          }
        },
        cancel: function() {
          this.$emit('cancelCustom', undefined)
          if (this.cancelFunc) {
            this.cancelFunc()
          } else {
            this.$parent.$parent.$parent.formOpen = false
            if (this.$parent.$parent.$parent.reset !== undefined) {
              this.$parent.$parent.$parent.reset()
            }
            if (this.$parent.cancel !== undefined) {
              this.$parent.cancel()
            }
          }
        },
        cacheData(data) {
          this.$parent.form = data
        }
      }
    }
</script>

<style scoped>

</style>
